<template>
  <el-dialog
      class='123123'
      width='60%'
      v-model='dialogFormVisible'
      title='新增巡检项'
      @close='close'
      @open='open'
  >
    <div class='ipt-box'>
      <div style="width: 170px;">巡检区域分类:</div>
      <el-select
      style="width: 450px;"
          v-model='value'
          class='m-2'
          placeholder='请选择区域分类'
          value-key='id'
          @change='categoryListChange'
      >
        <el-option v-for='item in data' :key='item.value' :label='item.name' :value='item'/>
      </el-select>
      <div style="width: 170px;">巡检区域名称:</div>
      <el-select
      style="width: 450px;"
          v-model='value1'
          @visible-change='visibleChange'
          value-key='id'
          multiple
          @removeTag='removeTag'
          placeholder='请选择区域名称'
          collapse-tags
      >
        <el-option v-for='item in cities' :key='item.inspectionCode' :label='item.inspectionName' :value='item'/>
      </el-select>
      <div style='width: 120px;margin-right: 5px;margin-left: 10px;'>部门名称:</div>
      <avue-input-tree style="width: 450px;" checkStrictly filterable type='tree' v-model="departmentValue" placeholder="请选择内容" :dic="adminList"
                       :props='props'>
           </avue-input-tree>
    </div>
    <el-divider/>
    <div class='table-top'>
      <span>序号</span><span
        v-if='value1.length!==0'>区域名称</span><span>事项名称</span><span>事项标准</span><span>部门</span><span>操作</span>
    </div>
    <div class='table-show'>
      <div v-for='(item, index) in data1' :key='index'>
        <span><span>{{ index + 1 }}</span></span>
        <span v-if='value1.length!==0'> {{ item.regionFacilityName || '' }}</span>
        <span> <el-input v-model='item.evenInfo'/></span>
        <span> <el-input v-model='item.evenCriterion'/></span>
        <span>  <avue-input-tree checkStrictly filterable type='tree' v-model="item.departmentId" placeholder="请选择内容" :dic="adminList"
                                 :props='props'>
           </avue-input-tree></span>
        <span>
            <el-tooltip content='保存' placement='bottom'>
              <el-icon
                  @click='
                setList({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: item.evenSwitch,
                departmentId:item.departmentId,
              })
            '><FolderChecked/></el-icon>
      </el-tooltip>
            <el-tooltip
                content='显示/隐藏'
                placement='bottom'
            >
              <span> <el-icon v-if='item.evenSwitch==="1"' @click='setEvenSwitch({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: 0+""
              })'><View/></el-icon><el-icon v-else @click='setEvenSwitch({
                id: item.id,
                evenInfo: item.evenInfo,
                evenCriterion: item.evenCriterion,
                evenSwitch: 1+""
              })'><svg t='1685411997570' class='icon' viewBox='0 0 1024 1024' version='1.1'
                       xmlns='http://www.w3.org/2000/svg' p-id='5099' width='40' height='40'><path
                  d='M746.986667 307.2l100.096-100.117333a21.333333 21.333333 0 0 0-30.165334-30.165334l-112.853333 112.853334A562.858667 562.858667 0 0 0 512 256C220.416 256 42.666667 477.653333 42.666667 512c0 23.765333 85.248 137.173333 234.346666 204.8l-100.096 100.117333a21.333333 21.333333 0 1 0 30.165334 30.165334l112.853333-112.853334A562.858667 562.858667 0 0 0 512 768c291.584 0 469.333333-221.653333 469.333333-256 0-23.765333-85.248-137.173333-234.346666-204.8zM86.869333 512A541.354667 541.354667 0 0 1 512 298.666667a513.664 513.664 0 0 1 158.122667 25.045333l-69.12 69.12A147.904 147.904 0 0 0 512 362.666667a149.504 149.504 0 0 0-149.333333 149.333333 147.904 147.904 0 0 0 30.144 89.024l-83.093334 83.093333A532.992 532.992 0 0 1 86.869333 512zM618.666667 512a106.496 106.496 0 0 1-165.397334 88.896l147.626667-147.626667A105.941333 105.941333 0 0 1 618.666667 512z m-213.333334 0a106.496 106.496 0 0 1 165.397334-88.896l-147.626667 147.626667A105.941333 105.941333 0 0 1 405.333333 512z m106.666667 213.333333a513.685333 513.685333 0 0 1-158.122667-25.045333l69.12-69.12A147.904 147.904 0 0 0 512 661.333333a149.504 149.504 0 0 0 149.333333-149.333333 147.904 147.904 0 0 0-30.144-89.024l83.093334-83.093333A532.992 532.992 0 0 1 937.130667 512 541.354667 541.354667 0 0 1 512 725.333333z'
                  fill='#646464' p-id='5100'></path></svg></el-icon></span>

            </el-tooltip>
               <el-tooltip content='删除' placement='bottom'> <el-icon @click='delList(item)'><Delete/></el-icon></el-tooltip>
               <el-tooltip content='一键同步' placement='bottom'><span><el-icon v-if='this.value1.length!==0'
                                                                                @click='sytList(item)'><Refresh/></el-icon></span></el-tooltip>
        </span>
      </div>
      <div class='ipt-table' v-show='isShow'>
        <span></span>
        <span v-if='value1.length!==0'></span>
        <span><el-input class='focus-module' v-model='form.evenInfo' placeholder='输入事项名称'/></span>
        <span><el-input class='focus-module' v-model='form.evenCriterion' placeholder='输入事项标准'/></span>
        <span> <avue-input-tree checkStrictly ref='tree' @change='handleTreeChange' filterable type='tree' v-model="form.departmentId"
                                placeholder="请选择内容" :dic="adminList" :props='props'>
           </avue-input-tree></span>
        <span class='focus-module'>
          <el-tooltip content='保存' placement='bottom'> <el-icon @click='addList' class='focus-module'><FolderChecked/></el-icon></el-tooltip>
        </span>
      </div>
    </div>
    <div class='add-box'>
      <div style='display: flex; justify-content: center; align-items: center' v-show='value'>
        <el-icon>
          <Plus/>
        </el-icon>
        <div @click='addObj' class='addbtn'>增加事项</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getTreeList,
  getlist,
  setList,
  addList,
  getTreeListChild,
  getChl,
  sytList,
  delById,
  delByChild,
  getAdminTree
} from '/@/api/check/omicheckregion'
import {ElLoading} from 'element-plus'

export default {
  name: 'dialog',
  data() {
    return {
      dialogFormVisible: false,
      value: '',
      input: '',
      isShow: false,
      value1: [],
      data: [],
      data2: [],
      cities: [],
      regionCode: '',
      regionName: '',
      data1: [],
      form: {
        evenInfo: '',
        evenCriterion: '',
        evenSwitch: '1',
        departmentId: '',
      },
      loading: null,
      adminList: [],
      props: {
        label: 'name',
        value: 'id'
      },
      departmentValue:''
    }
  },
  created() {
  },
  computed: {},
  mounted() {
    this.getTreeList()
  },
  watch: {},
  beforeDestroy() {
  },
  methods: {
    queryTree(tree, value) {
      let stark = [];
      stark = stark.concat(tree);
      while (stark.length) {
        const temp = stark.shift();
        if (temp.children) {
          stark = stark.concat(temp.children);
        }
        if (temp.id === value) {
          return temp.name;
        }
      }
      return "";
    },
    handleTreeChange(val) {
      this.form.departmentName = this.queryTree(this.adminList, val.value)
    },
    openLoading() {
      this.loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    closeLoading() {
      this.loading.close()
    },
    open() {
      window.addEventListener('click', this.listenerChangeFlag)
    },
    close() {
      window.removeEventListener('click', this.listenerChangeFlag)
      this.value = ''
      this.data1 = []
      this.departmentValue=''
      this.value1 = []
      this.cities = []
    },
    removeTag() {
      if (this.value1.length === 0) {
        this.openLoading()
        return getlist(this.regionCode).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(() => {
          this.closeLoading()
        })
      }
      let arr = this.value1.map((item) => {
        return item.inspectionCode
      })
      this.openLoading()
      getChl({id: this.regionCode, pidList: arr.join(',')}).then((res) => {
        this.data1 = res.data
        this.closeLoading()
      }).catch(() => {
        this.closeLoading()
      })
    },
    listenerChangeFlag(e) {
      if (e.target.className === 'addbtn') return
      let nowClassName = e.target.parentNode.parentNode.className
      if (!nowClassName.includes('focus-module')) {
        // if (this.isShow) {
        //   if (this.form.evenInfo && this.form.evenCriterion) {
        //     this.addList()
        //   }
        // }
        this.isShow = false
        this.form = {
          evenInfo: '',
          evenCriterion: '',
          evenSwitch: '1',
          departmentId: ''
        }
      }
    },
    // 同步事项
    sytList(item) {
      let pname = this.value.name
      let arr = this.cities.map((item) => {
        return {regionCode: item.inspectionCode, regionName: item.inspectionName}
      })
      this.openLoading()
      sytList({
        pid: this.regionCode + '',
        id: item.id,
        pname,
        evenSwitch: item.evenSwitch,
        evenInfo: item.evenInfo,
        evenCriterion: item.evenCriterion,
        chlid: arr
      }).then((res) => {
        this.$message.success('同步成功!')
        this.closeLoading()
        this.getData()
      }).catch(() => {
        this.closeLoading()
      })
    },
    // 改变显隐状态
    setEvenSwitch(data) {
      setList(data).then((res) => {
        this.$message.success('更改完成')
        this.getData()
      })
    },
    // 子类触发事件查询
    visibleChange(val) {
      if (!val && this.value !== '') {
        let arr = this.value1.map((item) => {
          return item.inspectionCode
        })
        if (this.value1.length === 0) {
          this.openLoading()
          return getlist(this.regionCode).then((res) => {
            this.data1 = res.data
            this.closeLoading()
          }).catch(() => {
            this.closeLoading()
          })
        }
        this.openLoading()
        getChl({id: this.regionCode, pidList: arr.join(',')}).then((res) => {
          this.data1 = res.data
          this.closeLoading()
        }).catch(() => {
          this.closeLoading()
        })

      }
    },
    // 巡检区域分类查询
    categoryListChange(val) {
      this.regionCode = val.id
      this.regionName = val.name
      // 事项数据
      this.openLoading()
      getlist(this.regionCode).then((res) => {
        this.data1 = res.data
        this.closeLoading()
      }).catch(() => {
        this.closeLoading()
      })
      // 巡检区域名称下拉框数据
      getTreeListChild(this.regionCode).then((res) => {
        this.cities = res.data
        this.value1 = []
      })
    },
    // 事项查询获取列表数据
    getData() {
      let arr = this.value1.map((item) => {
        return item.inspectionCode
      })
      if (this.value1.length !== 0) {
        getChl({id: this.regionCode, pidList: arr.join(',')}).then((res) => {
          this.data1 = res.data
        })
        this.$emit('refreshList')
      } else {
        getlist(this.regionCode).then((res) => {
          this.data1 = res.data
        })
        this.$emit('refreshList')
      }
    },
    // 删除事项
    delList(obj) {
      this.$confirm('是否确认删除以选择的数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            let flag = 0
            this.value1.length === 0 ? flag = 0 : flag = 1
            if (flag === 0) {
              return delById({id: obj.id, regionCode: this.regionCode, regionFacilityCode: obj.regionFacilityCode})
            } else {
              return delByChild({id: obj.id, regionCode: this.regionCode, regionFacilityCode: obj.regionFacilityCode})
            }
          })
          .then((data) => {
            this.$message.success('删除成功')
            this.getData()
          })
          .catch((cancelorerror) => {
          })
    },
    // 新增事项
    addList() {
      for (let key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          if (this.form[key] === '') {
            return this.$message.error('请输入值!')
          }
        }
      }
      let arr = this.value1.map((item) => {
        return {regionCode: item.inspectionCode, regionName: item.inspectionName}
      })
      if (arr.length === 0) {
        arr = this.cities.map((item) => {
          return {regionCode: item.inspectionCode, regionName: item.inspectionName}
        })
      }
      let flag = 0
      if (this.value1.length === 0) {
        flag = 0
      } else {
        flag = 1
      }
      this.openLoading()
      addList({
        regionCode: this.regionCode,
        regionName: this.regionName,
        evenDtoList: [this.form],
        regionDtoList: arr,
        flag: flag
      }).then((res) => {
        this.$message.success('新增成功!')
        this.closeLoading()
        this.getData()
        this.isShow = false
        this.form = {
          evenInfo: '',
          evenCriterion: '',
          evenSwitch: '1',
          departmentId: ''
        }
      }).catch(() => {
        this.closeLoading()
      })
    },
    // 修改事项
    setList(data) {
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          if (data[key] === '') {
            return this.$message.error('请输入值!')
          }
        }
      }
      data['departmentName']= this.queryTree(this.adminList,data.departmentId)
      setList(data).then((res) => {
        this.$message.success('修改成功')
        this.getData()
      })
    },
    getTreeList() {
      getTreeList().then((res) => {
        this.data = res.data
      }).catch((res) => {
      })
      getAdminTree().then((res) => {
        this.adminList = res.data
      })
    },
    // 显示输入框
    addObj() {
      this.isShow = true
      this.form.departmentId=this.departmentValue
    }
  }
}
</script>

<style lang='scss' scoped>
.ipt-box {
// width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;

  // & > div {
  //   display: flex;
  //   align-items: center;
  // }

  & > div:nth-child(1) {
    margin-right: 5px;
  }

  & > div:nth-child(3) {
    margin-right: 5px;
  }

  & > div:nth-child(2) {
    margin-right: 10px;
  }

  & > div:nth-child(4) {
    width: 25%;
  }
}

.table-top {
  font-size: 17px;
  margin-bottom: 10px;
  display: flex;

  span {
    display: flex;
    justify-content: start;
    width: 33%;
  }

  & > span:nth-child(1) {
    width: 10%;
  }
}

.table-show {
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ebedf1;

  & > div {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;

    & > span {
      width: 33%;
      display: flex;
      justify-content: start;
      align-items: center;
    }

    & > span:nth-child(1) {
      width: 10%;

      & > span {
        margin-left: 14px;
      }
    }

    & > span:last-child {
      font-size: 20px;
      margin-left: 5px;

      & > span {
        display: flex;
      }

      i {
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
}

.ipt-table {
  margin: 5px 0;
  z-index: 10;
}

.add-box {
  display: flex;
  align-items: center;
  color: #b3c6dd;

  div {
    cursor: pointer;
  }
}

.el-input {
}
</style>